<template>
  <div class="container">
    <div id="luckysheet" style="margin:0px;padding:0px;width:100%;height:80%;"></div>
    <div class="button-box">
      <el-button type="primary" @click="getSheetData">保存</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getServiceV2, onSelect, onBatchAdd } from '@/service/api'
import { json2sheet, sheet2json,buildSrvCols } from '@/utils/sheetUtils'
import { ElMessage } from 'element-plus'

const route = useRoute()
const v2data = ref({})
const list = reactive({
  data: [],
  page: []
})
const serviceName = ref(route.params.serviceName)
const app = ref(route.params.app)
const initSheet = async () => {
  if (route.query?.serviceName) {
    serviceName.value = route.query.serviceName
    app.value = route.query.app
    if(route.query.app){
      sessionStorage.setItem('current_app',route.query.app)
    }
    await getV2Data()
    await getList()
  }
  let defaultData = {}
  let dataVerification = {}
  const listData = list.data
  const srvCols = v2data.value.allFields
  if (Array.isArray(srvCols) && srvCols.length > 0) {
    // const showCols = srvCols.filter(item => (item.in_add === 1||item.in_update === 1))
    defaultData = await json2sheet(listData, srvCols)
  }
  console.log('defaultData', defaultData)
  var options = {
    container: 'luckysheet', //luckysheet为容器id
    lang: 'zh',
    showtoolbar: false,
    showinfobar: false,
    showsheetbar: false,
    showstatisticBar: false,
    cellRightClickConfig: {
      copy: false, // 复制
      copyAs: false, // 复制为
      paste: false, // 粘贴
      insertRow: false, // 插入行
      insertColumn: false, // 插入列
      deleteRow: false, // 删除选中行
      deleteColumn: false, // 删除选中列
      deleteCell: false, // 删除单元格
      hideRow: false, // 隐藏选中行和显示选中行
      hideColumn: false, // 隐藏选中列和显示选中列
      rowHeight: false, // 行高
      columnWidth: false, // 列宽
      clear: false, // 清除内容
      matrix: false, // 矩阵操作选区
      sort: false, // 排序选区
      filter: false, // 筛选选区
      chart: false, // 图表生成
      image: false, // 插入图片
      link: false, // 插入链接
      data: false, // 数据验证
      cellFormat: false // 设置单元格格式
    },
    data: [],
    hook: {
      cellMousedownBefore: function(e, data) {
        console.log('cellMousedownBefore', e, data)
      },
      cellEditBefore: function (e) {
        console.log('cellEditBefore', e)
        if (e && Array.isArray(e) && e[ 0 ] && e[ 0 ].row && e[ 0 ] && e[ 0 ].row[ 0 ] === e[ 0 ].row[ 1 ] && e[ 0 ].row[ 1 ] === 0) {
          // ElMessage.warning('标题行不能编辑')
          return false
        }
      },
      cellUpdateBefore: function (...e) {
        if (e[ 0 ] === 0) {
          return false
        }
        console.log('cellUpdateBefore', e)
      },
      cellUpdated: function (row, col, oldVal, newVal, isRefresh) {
        console.log('cellUpdated', row, col, oldVal, newVal, isRefresh)
      },
      rangePasteBefore: function (...e) {
        console.log('rangePasteBefore', e)
      },
      rangePasteAfter: function (...e) {
        console.log('rangePasteAfter', e)
      },
      cellRenderBefore: function (cell, position, sheet, context) {
        // console.log('cellRenderBefore', cell,position,sheet,context)
      },
    }
  }
  options.data[ 0 ] = defaultData
  console.log(defaultData)
  // console.log(options.data)
  luckysheet.create(options)

}

const getSheetData = () => {
  luckysheet.exitEditMode()
  let data = luckysheet.getSheetData()
  // data = data.slice(1)
  let res = sheet2json(data, list.data)
  console.log(res)
  console.log('删除整行数据的id：', res.del)
  console.log('修改数据', res.update, 2)
  console.log('新增数据', res.add, 2)
  saveData(res)

}
const saveData = async (data) => {
  let res = await onBatchAdd(data, serviceName.value, app.value)
  console.log(res)
  if (res?.resultMessage) {
    if (res.state === 'SUCCESS') {
      ElMessage({
        showClose: true,
        message: res.resultMessage,
        type: 'success',
      })
      initSheet()
    } else {
      ElMessage({
        showClose: true,
        message: res.resultMessage,
        type: 'error',
      })
    }
  }
  // resultMessage
}
const getList = async () => {
  if (serviceName.value) {
    const params = {
      app: app.value || 'daq'
    }
    const res = await onSelect(serviceName.value, params)
    list.data = res.data;
    list.page = res.page
  }
}
const getV2Data = async () => {
  const res = await getServiceV2(serviceName.value.replace("_select","_add"), 'add', app.value || 'daq')
  if (res?.state === 'SUCCESS') {
    v2data.value = res.data
    v2data.value.allFields = await buildSrvCols(v2data.value.srv_cols)
    document.title = res.data.service_view_name
  }
  // luckysheet.loadSheetFromJSON(v2data.data)
}
onMounted(() => {
  initSheet()
})
</script>
<style  lang='scss'>
.container {
  height: 100vh;
  width: 100vw;
  position: relative;
  .luckysheet-wa-calculate {
    display: none;
  }

  .button-box {
    padding: 20px;
    text-align: center;
  }
  #luckysheet-dataVerification-dropdown-List{
    // overflow-y: scroll;
    // height: 500px;
  }
}
</style>